<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/api.css">
	   <link rel="stylesheet" href="../../css/aui_font.css">
	   <link rel="stylesheet" href="../../css/base_icon.css">
	<style>
		body{
			height: 100vh;
			    background-color: #F9FAFE;
		}
		#view{
			
			padding: 20px;
		}
		.top{
			width: 100%;
			display: flex;
			justify-content: space-between;
			color: #FFFEFF;
		}
		.top .name{
			color: #FFFEFF;
			font-weight: bold;
		}
		.top .code{
			color: #FFFEFF;
			font-size: 14px;
		}
		.card{
			background-image: linear-gradient(to right, #A795FB,#9C85FA, #8368F4);
			padding: 20px;
			border-radius: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.count{
			padding: 20px;
			display: flex;
			align-items: flex-end;
		}
		.count .money{
			
			color: #FFFEFF;
			font-size: 30px;
			line-height: 30px;
			font-weight: bold;
		}
		.date{
			color: #CBBCFC;
		}
		
		.list{
			margin-top: 10px;
			padding: 10px 0;
			background-color: #FFFFFF;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
		.item{
			
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px 0;
		}
		.item .da{
			padding: 10px;
			font-size: 24px;
			font-weight: bold;
			color: #6749F9;
		}
		.item .dt{
			font-size: 14px;
		}
		.shouyi{
			padding: 10px;
		}
		.shouyi .title{
			font-weight: bold;
			padding: 10px 0;
		}
		.shouyi-list .shouyi-item{
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			padding: 10px 0;
			
		}
		.shouyi-item-title{
			font-weight: bold;
		}
		.time{
			width: 100px;
			text-align: center;
		}
		
	</style>
</head>

<body>
   <div id="view">
		<div class="card">
			<div class="top">
				<div class="name">{{_i18n('总收益')}}</div>
			</div>
			<div class="count">
				<div class="money">{{info.total}}</div>
			</div>
			<!-- <div class="date">
				有效期至: 2023-07-01
			</div> -->
		</div>
		<div class="list">
			<div class="item">
				<div class="da">{{info.charge}}</div>
				<div class="dt">{{_i18n('充值收益')}}</div>
			</div>
			<div class="item">
				<div class="da">{{info.chat}}</div>
				<div class="dt">{{_i18n('聊天收益')}}</div>
			</div>
			<div class="item">
				<div class="da">{{info.gift}}</div>
				<div class="dt">{{_i18n('礼物收益')}}</div>
			</div>
		</div>
		<div class="shouyi">
			<div class="title">{{_i18n('每日收益')}}</div>
			<ul class="shouyi-list">
				<li class="shouyi-item shouyi-item-title">
					<div>{{_i18n('用户')}}ID</div>
					<div>{{_i18n('金额')}}</div>
					<div>{{_i18n('日期')}}</div>
				</li>
				<li class="shouyi-item " v-for="(item,index) in list">
					<div>{{item.user_id}}</div>
					<div>{{item.profit}}</div>
					<div>{{item.date}}</div>
				</li>
			</ul>
		</div>
   </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script>
    var view = new Vue({
        el: '#view',
		data:{
			info: {
				"total": 0,
				"charge": 0,
				"chat": 0,
				"gift": 0
			},
			list:[]
		}
	})
    apiready = function() {
       getInfo()
	   getDayProfit()
    }
    
    function getInfo() {
        _ajax('api/proxy/profit', function(ret, err) {
            if (ret && ret.data && ret.data) {
    				  view.info = ret.data
            } 
        }, {
    		user_id: $api.getStorage('userid')
    	})
    }
	function getDayProfit() {
	    _ajax('api/proxy/dailyProfit', function(ret, err) {
	        if (ret && ret.data && ret.data) {
					  view.list = ret.data
	        } 
	    }, {
			user_id: $api.getStorage('userid')
		})
	}
</script>

</html>